<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>模板语法</title>
  <script src="../js/vue.js"></script>

</head>

<body>

  <!-- 
    Vue模板语法两大类：
      1. 插值语法：
        功能：用于解析标签体内容
        写法：{{xxx}}，xxx是js表达式，可以直接读取到data中的所有属性
      2. 指令语法：
        功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。）
        举例：v-bind:href="xxx" ，xxx同样要写js表达式，且可以直接读取到data中的所有属性
        
   -->

  <div id="root">
    <h1>插值语法</h1>
    <h3>Hello,{{name}}</h3>
    <hr>
    <h1>指令语法</h1>
    <a :href="href" :x='hello'>URL</a>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
      el: '#root',
      data: {
        name:'jack',
        href:'https://www.baidu.com',
        hello:'nihao'
      }
    })
  </script>

</body>

</html>